<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
				xmlns:f="http://java.sun.com/jsf/core"
				xmlns:h="http://java.sun.com/jsf/html"
				xmlns:p="http://primefaces.prime.com.tr/ui"
				xmlns:ui="http://java.sun.com/jsf/facelets"
				xmlns:survey="http://java.sun.com/jsf/composite/components/question"
				template="/layout/template.xhtml">
	
	<ui:define name="body">
	
		<h:form id="createSurveyForm">
			
			<p:panel header="Survey Creation Form" styleClass="panel-text full-size">
				<h:panelGrid columns="1" styleClass="full-size">
					
					<h:column>
						<h:outputLabel for="surveyTitle" value="Survey Title: " />
						<h:inputText id="surveyTitle" value="#{surveyCreationView.newSurvey.title}" styleClass="surveyText" />
					</h:column>
					
					<h:column>
						<h:outputLabel for="surveyDescription" value="Survey Description: " />
						<h:inputTextarea id="surveyDescription" value="#{surveyCreationView.newSurvey.description}" styleClass="surveyText" />
					</h:column>
					
					<p:panel id="selectedQuestionsListPanel">
						<h:dataTable id="selectedQuestionsList"
										 value="#{surveyCreationView.newSurvey.questions}"
										 var="question"
										 styleClass="dataTableComponent">
								<f:facet name="header">
									<h:outputText value="Selected Questions" />
								</f:facet>
								
								<h:column headerClass="dataTablaHeader">
									<f:facet name="header">
										<h:outputText value="ID" />
									</f:facet>
								    <h:outputText value="##{question.id}" />
								</h:column>
								
								<h:column headerClass="dataTablaHeader">
									<f:facet name="header">
										<h:outputText value="Question Text" />
									</f:facet>
								    <h:outputText value="#{question.text}" />
								</h:column>
								
								<h:column headerClass="dataTablaHeader">
									<f:facet name="header">
										<h:outputText value="Creation Date" />
									</f:facet>
								    <h:outputText value="#{question.creationDate}" />
								</h:column>
								
								<h:column headerClass="dataTablaHeader">
									<f:facet name="header">
										<h:outputText value="Level" />
									</f:facet>
								    <h:outputText value="#{question.level}" />
								</h:column>
								
								<h:column>
									<h:commandButton id="delQuestion" value="Remove" actionListener="#{surveyCreationView.removeQuestion(question)}">
										<f:ajax event="action" render=":createSurveyForm:selectedQuestionsListPanel :createSurveyForm:questionsListPanel" />
									</h:commandButton>							
								</h:column>
								
							</h:dataTable>
					</p:panel>
					
					<p:panel id="questionsListPanel">
							
						<h:dataTable id="questionsList"
									 value="#{surveyCreationView.questions}"
									 var="question"
									 styleClass="dataTableComponent"
									 rendered="#{not empty questionsManagementView.questions}">
							
							<f:facet name="header">
								<h:outputText value="Available Questions" />
							</f:facet>
							
							<h:column headerClass="dataTablaHeader">
								<f:facet name="header">
									<h:outputText value="ID" />
								</f:facet>
							    <h:outputText value="##{question.id}" />
							</h:column>
							
							<h:column headerClass="dataTablaHeader">
								<f:facet name="header">
									<h:outputText value="Question Text" />
								</f:facet>
							    <h:outputText value="#{question.text}" />
							</h:column>
							
							<h:column headerClass="dataTablaHeader">
								<f:facet name="header">
									<h:outputText value="Creation Date" />
								</f:facet>
							    <h:outputText value="#{question.creationDate}" />
							</h:column>
							
							<h:column headerClass="dataTablaHeader">
								<f:facet name="header">
									<h:outputText value="Level" />
								</f:facet>
							    <h:outputText value="#{question.level}" />
							</h:column>
							
							<h:column>
								<h:commandButton id="addQuestion" value="Add" actionListener="#{surveyCreationView.selectQuestion(question)}">
									<f:ajax event="action" render=":createSurveyForm:selectedQuestionsListPanel :createSurveyForm:questionsListPanel" />
								</h:commandButton>							
							</h:column>
		
						</h:dataTable>

					</p:panel>
					
				</h:panelGrid>
			</p:panel>
			
			<h:panelGrid columns="2" rowClasses="align-right" styleClass="full-size">
	        	<h:panelGroup>
					<p:commandButton value="Save" action="#{surveyCreationView.createSurvey}" update="createSurveyForm, notifications, statisticsPanel:statisticsPanel" />
					<p:commandButton action="home" value="Finish" immediate="true" ajax="false" />
				</h:panelGroup>
			</h:panelGrid>
	
		</h:form>
	</ui:define>
</ui:composition>